import React, { useEffect } from 'react';
import { Loading, Box } from '@alifd/next';
import { observer } from 'mobx-react-lite';
import { Chart, Tooltip, Point, Line, Legend, Interval } from 'bizcharts';
import { useStore } from '@/hooks';
import styles from './AssetColumnChart.module.scss';
import { toJS } from 'mobx';
import moment from 'dayjs';
import { t } from '@lingui/macro';
import ChartRangePicker from './ChartRangePicker';
import TauSimpleSelect from '@/components/TauSimpleSelect';

const scale = {
  count: {
    min: 0,
    tickCount: 4,
    alias: t`订单`,
    type: 'linear-strict',
  },
  priceSum: {
    min: 0,
    tickCount: 4,
    alias: t`金额`,
    type: 'linear-strict',
  },
};
const scale2 = {
  totalCount: {
    min: 0,
    tickCount: 4,
    alias: t`客户总数`,
    type: 'linear-strict',
  },
  dayCount: {
    min: 0,
    tickCount: 4,
    alias: t`新增客户`,
    type: 'linear-strict',
  },
};
const colors = ['#6394f9', '#62daaa'];

function AssetColumnChart() {
  const { dashboardStore: store } = useStore();
  const { queryBUS, queryCT, loading } = store;

  useEffect(() => {
    (async () => {
      await store.fetchBUS();
      await store.fetchCT();
    })();
  }, []);

  const handleOnDateBUS = (v) => {
    if (v[0] && v[1]) {
      const from = moment(v[0]).format('YYYY-MM-DD');
      const to = moment(v[1]).format('YYYY-MM-DD');
      store.fetchBUS({ from, to });
    } else {
      queryBUS.from = '';
      queryBUS.to = '';
      store.fetchBUS();
    }
  };

  const handleOnDateCustomer = (v) => {
    if (v[0] && v[1]) {
      const from = moment(v[0]).format('YYYY-MM-DD');
      const to = moment(v[1]).format('YYYY-MM-DD');
      store.fetchCT({ from, to });
    } else {
      queryCT.from = '';
      queryCT.to = '';
      store.fetchCT();
    }
  };

  const handleUserType = (e) => {
    if (e !== undefined) {
      store.fetchCT({ userRegisterStatus: e });
    } else {
      store.fetchCT({ userRegisterStatus: -1 });
    }
  };

  let chartIns = null;

  return (
    <div className={styles.assetColumnChart}>
      <Loading visible={loading.cc}>
        <ChartRangePicker text="巴士订单增长趋势图" handleOnChange={(e) => handleOnDateBUS(e)} prises={toJS(store.busOrder)} />
        <Chart
          scale={scale}
          autoFit
          height={400}
          data={toJS(store.busOrder)}
          onGetG2Instance={(chart) => {
            chartIns = chart;
          }}
        >
          <Legend
            custom
            allowAllCanceled
            columnSize={10}
            size={9}
            items={[
              {
                value: 'priceSum',
                name: '金额',
                marker: {
                  symbol: 'square',
                  style: { fill: colors[0] },
                },
              },
              {
                value: 'count',
                name: '订单',
                marker: {
                  symbol: 'hyphen',
                  style: { stroke: colors[1], lineWidth: 3 },
                },
              },
            ]}
            onChange={(ev) => {
              const { item } = ev;
              const { value } = item;
              const checked = !item.unchecked;
              const geoms = chartIns.geometries;

              for (let i = 0; i < geoms.length; i++) {
                const geom = geoms[i];

                if (geom.getYScale().field === value) {
                  if (checked) {
                    geom.show();
                  } else {
                    geom.hide();
                  }
                }
              }
            }}
          />
          <Tooltip shared />
          <Interval
            position="date*priceSum"
            color={colors[0]}
            size={9}
            style={{ lineWidth: 2 }}
          />
          <Line
            position="date*count"
            color={colors[1]}
            size={3}
            shape="smooth"
            adjust={[
              {
                type: 'stack',
                marginRatio: 0,
              },
            ]}
          />
          <Point
            position="date*count"
            color={colors[1]}
            size={3}
            shape="circle"
          />
        </Chart>
      </Loading>

      <Loading visible={loading.ct}>
        <Box direction="row" align="center">
          <ChartRangePicker text="客户增长趋势图" handleOnChange={(e) => handleOnDateCustomer(e)} />
          <TauSimpleSelect placeholder="请选择用户类型" style={{ width: 140, marginLeft: 10 }} data={store._userTypes} onChange={(v) => handleUserType(v)} />
        </Box>
        <Chart
          scale={scale2}
          autoFit
          height={400}
          data={toJS(store.ct)}
          onGetG2Instance={(chart) => {
            chartIns = chart;
          }}
        >
          <Legend
            custom
            allowAllCanceled
            items={[
              {
                value: 'totalCount',
                name: '客户总数',
                marker: {
                  symbol: 'square',
                  style: { fill: colors[0], r: 5 },
                },
              },
              {
                value: 'dayCount',
                name: '新增客户',
                marker: {
                  symbol: 'hyphen',
                  style: { stroke: colors[1], r: 5, lineWidth: 3 },
                },
              },
            ]}
            onChange={(ev) => {
              const { item } = ev;
              const { value } = item;
              const checked = !item.unchecked;
              const geoms = chartIns.geometries;

              for (let i = 0; i < geoms.length; i++) {
                const geom = geoms[i];

                if (geom.getYScale().field === value) {
                  if (checked) {
                    geom.show();
                  } else {
                    geom.hide();
                  }
                }
              }
            }}
          />
          <Tooltip shared />
          <Interval
            position="date*totalCount"
            color={colors[0]}
            size={9}
            style={{ lineWidth: 2 }}
            adjust={[
              {
                type: 'stack',
                marginRatio: 0,
              },
            ]}
          />
          <Interval
            position="date*dayCount"
            color={colors[1]}
            size={9}
            style={{ lineWidth: 2 }}
            adjust={[
              {
                type: 'stack',
                reverseOrder: false,
              },
            ]}
          />
        </Chart>
      </Loading>
    </div>
  );
}

export default observer(AssetColumnChart);
